<template>
	<view class="page">
		<scroll-view class="m-scrollBox" scroll-y="true">
			<block v-if="(voucherList.length>0)">
				<view class="m-coupon-item" @click="onSelectVoucher" :data-id="(item.user_voucher_id)" :data-item_id="(item.item_id)" v-for="(item, index) in voucherList" :key="index">
					<image lazy-load src="https://static.shopsuite.cn/xcxfile/appicon/images/coupon_red.png" class="item-bg"></image>
					<view class="coupon-item-left">
						<view class="item-left-top">{{ __('￥') }}<label style="font-size:64rpx">{{ item.voucher_price }}</label>
						</view>
						<view class="item-left-bottom">{{ sprintf(__('满(%s)可用'), item.voucher_subtotal) }}</view>
					</view>
					<view class="coupon-item-right">
						<view class="item-title item-title-black">{{ item.activity_name }}</view>
						<view class="item-middle">{{ sprintf(__('满 %s 减 %s'), item.voucher_subtotal, item.voucher_price) }}</view>
						<view class="item-middle">
							<label class="item-time">{{ $.formatDateFormatter(item.voucher_start_date, "yy-MM-dd") }} {{ __('至') }}
								{{ $.formatDateFormatter(item.voucher_end_date, "yy-MM-dd") }}</label>
						</view>

						<view class="item-desc"></view>
					</view>
					<image lazy-load src="/static/images/checked.png" class="image-checked" v-if="(item.user_voucher_id == idChecked)" />
				</view>

				<button class="u-btn u-btn-default" style="margin-top:30rpx;" @click="uesNothing">{{ __('不使用优惠券') }}</button>
			</block>
			<view class="m-nullcontent" v-else>
				<view class="m-nullpage-middle">
					<label class="iconfont icon-meiyougengduo"></label>
					<view class="m-null-tip">
						<text>{{ __('亲~什么都没有') }}</text>
						<text>{{ __('赶快去领券中心吧') }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $ from "../../helpers/util";
	import {
		mapMutations,
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				options: {},
				voucherList: [],
				idChecked: 0,
			};
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('使用优惠券')
			});
			options.val = decodeURIComponent(options.val)
			var voucher_items = $.parseJSON(options.val);
			this.setData({
				voucherList: voucher_items,
				idChecked: options.user_voucher_id,
				options: options,
			})
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
			onSelectVoucher: function(e) {
				var that = this;
				var item_id = parseInt(e.currentTarget.dataset.item_id);

				this.setData({
					idChecked: parseInt(e.currentTarget.dataset.id)
				});
				this.goback();

				return;
			},
			uesNothing: function() {
				var that = this;

				this.setData({
					idChecked: 0
				});

				this.goback();
			},
			goback: function() {
				var that = this;
				$.navigateBack(1, function() {
					var params = that.options;

					params.user_voucher_id = that.idChecked;
					that.notice.postNotificationName("RefreshCoupon", params)
				})
			}
		}
	}
</script>


<style lang="scss">
	@import "../../styles/_variables";

	.m-scrollBox {
		padding: 10rpx 10rpx 0rpx;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.m-coupon-item {
		margin: 10rpx 10rpx 20rpx;
		position: relative;
		width: 100%;
		height: 190rpx;
	}

	.m-coupon-item .item-bg {
		width: 710rpx;
		height: 190rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.coupon-item-left {
		position: absolute;
		color: white;
		text-align: center;
		width: 250rpx;
		padding: 25rpx 0rpx;
	}

	.item-left-top {
		line-height: 100rpx;
		font-weight: bold;
	}

	.item-left-top label {
		font-size: 90rpx;
	}

	.item-left-bottom {
		font-size: 24rpx;
	}

	.coupon-item-right {
		position: absolute;
		left: 250rpx;
		top: 0;
		width: 420rpx;
		height: 170rpx;
		padding: 10rpx 20rpx;
		font-size: 22rpx;
		color: gray;
	}

	.item-title {
		line-height: 40rpx;
		font-size: 28rpx;
		height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.item-title-black {
		color: #333;
	}

	.item-middle {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
	}

	.item-usenow {
		font-size: 24rpx;
		border: 1px solid $default-skin-bg;
		float: right;
		color: $default-skin-bg;
		border-radius: 40rpx;
		padding: 0 15rpx;
		position: relative;
		top: -8rpx;
		line-height: 40rpx;
	}

	.item-desc {
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 5rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.image-checked {
		position: absolute;
		right: 20rpx;
		bottom: 0;
		width: 50rpx;
		height: 50rpx;
	}
</style>